<script setup>
import * as echarts from "echarts";
// 原始数据（保持对应关系）'农学', '医学', '军事',
//'文学', '天文地理', '数学', '综合'
const originalData = [
  {
    label: "农学",
    value: 286,
    // 细分数据：北魏《齐民要术》、元《王祯农书》、明《农政全书》等
  },
  {
    label: "医学",
    value: 413,
    // 含《黄帝内经》《伤寒杂病论》《本草纲目》等经典
  },
  {
    label: "军事",
    value: 157,
    // 涵盖《孙子兵法》《武经总要》《纪效新书》等
  },
  {
    label: "工程技术",
    value: 228,
    // 包括《考工记》《天工开物》《髹饰录》等
  },
  {
    label: "天文地理",
    value: 189,
    // 含《甘石星经》《授时历》《崇祯历书》等
  },
  {
    label: "数学",
    value: 135,
    // 九章算术、数书九章、四元玉鉴等
  },
  {
    label: "综合",
    value: 327,
    // 梦溪笔谈、物理小识、格致镜原等
  },
];

// 创建排序后的数据集（深拷贝避免污染原始数据）
const sortedData = JSON.parse(JSON.stringify(originalData)).sort(
  (a, b) => b.value - a.value
); // 降序排序

// 配置图表选项
const option = {
  title: {
    text: "各领域自然科学著作数量统计",
    left: "center",
    top: 10,
    textStyle: {
      color: "#000",
    },
  },
  tooltip: {
    trigger: "item",
    formatter: "{b}领域 : {c}部", // 显示格式：标签 + 数值
  },
  xAxis: {
    name: "数量",
    type: "value",
    scale: true, // 让x轴数据从最低开始不是0
    // axisLabel: {
    //   formatter: '{value}' // 保持数值格式
    // }
  },
  yAxis: {
    name: "领域",
    type: "category",
    axisLabel: {
      interval: 0, // 显示所有标签
      // rotate: 30, // 标签旋转30度防止重叠
      fontSize: 12,
    },
    data: sortedData.map((item) => item.label), // 使用排序后的标签
  },
  series: [
    {
      type: "bar",
      data: sortedData.map((item) => item.value), // 使用排序后的数据
      barWidth: "60%", // 调整柱宽
      itemStyle: {
        borderRadius: [0, 5, 5, 0], // 顶部圆角
        color: (params) => {
          // 为每个柱子定义不同的渐变色
          const colors = [
            { start: "#488d79", end: "#488d79" },
            { start: "#488d79", end: "#488d79" },
            { start: "#488d79", end: "#488d79" },
            { start: "#488d79", end: "#488d79" },
            { start: "#488d79", end: "#488d79" },
            { start: "#488d79", end: "#488d79" },
            { start: "#488d79", end: "#488d79" },
          ];
          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: colors[params.dataIndex].start },
            { offset: 1, color: colors[params.dataIndex].end },
          ]);
        },
      },
      // ===== 柱顶数值显示 =====
      label: {
        show: true,
        position: "right",
        color: "#488d79",
        fontWeight: "bold",
      },
    },
  ],
  // ===== 图表布局调整 =====
  grid: {
    containLabel: true,
    left: "3%",
    right: "10%",
    bottom: "10%", // 为x轴标签留出空间
  },
};
</script>

<template>
  <!-- 科学著作页面的柱状图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
